<template>
  <el-container class="w100 h100">
    <el-aside v-if="winInnerWidth > 600" :style="{width: isCollapse ? '70px' : '200px'}" class="aside flex-column">
      <Logo/>
      <menu-main v-if="isShowMenu"/>
    </el-aside>
    <mobile-menu v-else/>
    <el-container class="right-container" direction="vertical">
      <el-header class="header" v-if="isShowHeader">
        <header-main />
      </el-header>
      <tabs-main v-if="isShowTagsView"/>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
      <!-- <el-footer class="footer">Footer</el-footer> -->
    </el-container>
  </el-container>
</template>
<script>
import {useRoute, useRouter} from 'vue-router'
import {watch, computed, onMounted, ref} from 'vue'
import {useStore} from 'vuex'

import MenuMain from '../Menu'
import Logo from '../Logo'
import HeaderMain from '../Header'
import MobileMenu from '../MobileMenu'
import TabsMain from '../TagsView'
import {loopSearchArr} from '@/utils'

export default {
  name: "MainName",
  components: {MenuMain,Logo, HeaderMain, TabsMain, MobileMenu},
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    const isCollapse = computed(()=> store.getters.getIsCollapse)
    const isShowMenu = computed(()=>store.getters.getShowMenu)
    const isShowHeader = computed(()=>store.getters.getShowHeader)
    const isShowTagsView = computed(()=>store.getters.getShowTagsView)

    // 监听路由，用于菜单及选项卡选中样式
    watch(()=>route.path, newRoute=>{
      if(newRoute == '/redirect'){
        return
      }
      // 默认打卡首页/菜单第一项
      if(newRoute == '/'){
        router.replace(store.getters.getFirstRoutePath)
        return
      }
      // 存储路由path
      store.commit('setRoutePath', newRoute)
      // 存储点击跳转过的菜单，用于选项卡展示
      store.dispatch('setTabsArr', {route, newRoute})
      // 获取面包屑
      store.commit('setBreadCrumbArr', loopSearchArr(store.getters.getMenuList, newRoute, [], true))
    },{
        immediate: true,
        deep: true
    })

    const winInnerWidth = ref(1920)

    const returnWindowWidth = (e) => {
      const w = e && e.target ? e.target.innerWidth : window.innerWidth
        winInnerWidth.value = w
        if(w > 920){
            if(!isCollapse.value) return
            store.commit('setIsCollapse', false)
        }else{
          if(w < 920){
            if(isCollapse.value) return
            store.commit('setIsCollapse', true)
          }
        }
    }

    onMounted(()=>{
      returnWindowWidth()
      // 窗口大小监听
      window.onresize = (e) => {
        returnWindowWidth(e)
      }
    })

    const menuMaskClick = () => {
      store.commit('setIsCollapse', true)
    }

    return {
      isCollapse,
      isShowMenu,
      isShowHeader,
      isShowTagsView,
      winInnerWidth,
      menuMaskClick,
    }
  }
};
</script>
<style scoped>
.aside{
  max-width: 200px;
  transition: all .5s;
  background-color: #001529;
}
.right-container{
  border-left: 1px solid #ccc;
}
.header{
  /* border-bottom: 1px solid #ccc; */
}
.main{
    /* border: 1px solid red; */
}
.footer{
    border: 1px solid red;
}
.aside-fixed{
  position: fixed;
  height: 100%;
  z-index: 100;
}
.display-none{
  display: none;
}
.menu-mask{
  position: fixed;
  z-index: 90;
  background-color: rgba(0,0,0,.3);
}
</style>